<!DOCTYPE html>
<html lang="en">
    
<!-- Mirrored from preview.freewebtemplatesdownload.com/syntra/tables-datatable.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 07 Mar 2018 10:30:55 GMT -->
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="Mannat Themes">
        <meta name="keyword" content="">

        <title> | 订单列表</title>

        <!-- Theme icon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- Responsive and DataTables -->
        <link href="assets/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />


        <!-- Theme Css -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/slidebars.min.css" rel="stylesheet">
        <link href="assets/css/icons.css" rel="stylesheet">
        <link href="assets/css/menu.css" rel="stylesheet" type="text/css">
        <link href="assets/css/style.css" rel="stylesheet">

    <style >
        .form-control{
            width:200px;
            float:left;
            margin-right: 20px;
            margin-top: 20px;
        }
        .clear{
            clear: both;
        }
        .query{
            text-align: right;
            float: right;
            margin: 20px 0px;
        }
        .btn-xs{
            color:blue;
        }
        .detailItem{
            position: absolute;
            left: 0px;
            top:0px;
            width:100%;
            height: 1500px;
            　　filter: Alpha(Opacity=90);
            border:1px solid #aaaaaa;
            z-index: 100000;
            background-color: #6c757d;
            filter:alpha(opacity:9); opacity:0.9;  -moz-opacity:0.9;-khtml-opacity: 0.9;
            display: none;
        }
        .detail-close{
            text-align: right;
            margin-top: 5px;
            margin-right: 5px;
            font-size: 24px;
        }
        .detail{
            width: 60%;
            margin: auto;
            background-color: #ffffff;
            height: 1000px;
            overflow-y: auto;
        }
        .rowDetail{
            width:100%
        }
        .rowItem{
            width: 100%;
        }
        .tyds-orderStatus{
            width:100%;
            height: 40px;
            line-height: 40px;
            border-left:1px solid rgba(0,0,0,.125);
            border-top:1px solid rgba(0,0,0,.125);
            border-right:1px solid rgba(0,0,0,.125);
            position: relative;
            bottom: 0px;
            z-index: 100;
        }

        .tyds-orderStatus span{
            height: 40px;
            line-height: 40px;
            width:100px;
            display: inline-block;
            text-align: center;
            border-right:1px solid rgba(0,0,0,.125);
        }
        .tyds-orderItem{
            cursor:pointer;
        }
        .query{
            display: inline-block;
            float: left;
        }
    </style>
    </head>

    <body class="sticky-header">
        <section>
            <!-- sidebar left start-->
            <div class="sidebar-left">
                <div class="sidebar-left-info">
                    <!--sidebar nav start-->
                    <ul class="side-navigation">
                        <li>
                            <h3 class="navigation-title"></h3>
                        </li>
                        <li class="menu-list"><a href="#"><i class="fa fa-university"></i> <span>店铺管理</span></a>
                            <ul class="child-list">
                                <li ><a href="shop.html"> 店铺列表</a></li>
                                <li ><a href="#"> </a></li>
                            </ul>
                        </li>
                        <li class="menu-list"><a href="#"><i class="mdi mdi-google-circles-extended"></i> <span>商品管理 <span
                                class="badge badge-primary noti-arrow pull-right">6</span> </span></a>
                            <ul class="child-list">
                                <li><a href="#"> 商品管理</a></li>
                                <li><a href="#"> 商品规格</a></li>
                            </ul>
                        </li>

                    </ul><!--sidebar nav end-->
                </div>
            </div><!-- sidebar left end-->

            <!-- body content start-->
            <div class="body-content" >
                <!-- header section start-->
                <div class="header-section">
                    <!--logo and logo icon start-->
                    <div class="logo">
                        <a href="#">
                            <span class="logo-img">
                                <img src="assets/images/logo_sm.png" alt="" height="26">
                            </span>
                            <!--<i class="fa fa-maxcdn"></i>-->
                            <span class="brand-name">帮帮体验</span>
                        </a>
                    </div>

                    <!--toggle button start-->
                    <a class="toggle-btn"><i class="ti ti-menu"></i></a>
                    <!--toggle button end-->
                </div>
                <!-- header section end-->

                <div class="container-fluid">
                    <div class="page-head">
                        <form class="tyds-filter">



                            <input type="text" class="form-control" placeholder="请输入订单号"  name="ty.order_sn" types="like" />


                            <input type="text" style="display: none" id="order_status" name="so.order_place" value="1" types="equals" />
                            <button type="button" class="btn btn-primary query" >查询</button>

                            <button type="button" class="btn query getorder " style="margin-left: 10px" >同步订单</button>
                        </form>
                    </div>
                    <div class="clear"></div>

                    <div class="tyds-orderStatus">
                        <span style="background-color: white" class="tyds-orderItem" tag="1">英国</span><span class="tyds-orderItem" tag="2">法国</span><span class="tyds-orderItem" tag="4">德国</span><span class="tyds-orderItem" tag="5">意大利</span><span class="tyds-orderItem" tag="5">西班牙</span>
                    </div>
                    <div class="data-table">
                        <div class="row">
                            <div class="col-lg-12 col-sm-12">
                                <div class="card m-b-30">
                                    <div class="card-body table-responsive">
                                        <h5 class="header-title">体验订单</h5>
                                        <p class="text-muted"></p>
                                        <div class="table-odd">
                                            <table id="datatable" class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>亚马逊编号</th>
                                                    <th>订单金额</th>
                                                    <th>客户名称</th>

                                                    <th>省</th>
                                                    <th>邮寄地址</th>
                                                    <th>邮编</th>

                                                    <th>城市</th>
                                                    <th>地址类型</th>
                                                    <th>国家码</th>

                                                    <th>收件人</th>



                                                </tr>
                                                </thead>
                                            </table>
                                        </div>           
                                    </div>
                                </div>
                            </div>
                        </div><!--end row-->
                    </div>                   
                    
                </div><!--end container-->

                <!--footer section start-->
                <footer class="footer">
                    2018 &copy; zhou.
                </footer>
                <!--footer section end-->
            </div>
            <!--end body content-->

            <div class="detailItem">
                <div class="detail-close">
                <i class="fa fa-times"></i>
                </div>

                <div class="detail">
                <form role="form" class="detail-form">




                </form>
                </div>
            </div>
        </section>

        <!-- jQuery -->
        <script src="assets/js/jquery-3.2.1.min.js"></script>
        <script src="assets/js/popper.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery-migrate.js"></script>
        <script src="assets/js/modernizr.min.js"></script>
        <script src="assets/js/jquery.slimscroll.min.js"></script>
        <script src="assets/js/slidebars.min.js"></script>

         <!-- Responsive and datatable js -->
        <script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="assets/plugins/datatables/dataTables.bootstrap4.min.js"></script>
        <script src="assets/plugins/datatables/dataTables.responsive.min.js"></script>
        <script src="assets/plugins/datatables/responsive.bootstrap4.min.js"></script>

        <!--app js-->
        <script src="assets/js/jquery.app.js?v=1.1.7"></script>
        <script type="text/javascript">

            function initTab(){


                $('.tyds-orderItem').click(function(){
                    $('.tyds-orderItem').css({"backgroundColor":"#f3f4f5"});
                    $(this).css({"backgroundColor":"#ffffff"});

                    var status=$(this).attr('tag');
                    $("#order_status").val(status);

                    $(".btn-primary").click();

                });
            }

            $(document).ready(function() {

                initTab();

                $(".detail-close").click(function () {

                    $(this).parent().hide();
                });

                if(window.localStorage.menuType=="close"){
                    $(".toggle-btn").trigger("click");
                }

                //appUrl="http://localhost:8401/order/";
                var tb= $('#datatable').DataTable({

                    "serverSide": true,
                    'ajax': {
                     'url':   appUrl+'order/admin/list',
                     'method':'POST'
                    },"processing": true,
                    "serverSide": true,
                        "columns": [
                            {"data":"AmazonOrderId",width:100},
                            {"data":"Amount",width:150},
                            {"data":"BuyerName",width:150},

                            {"data":"StateOrRegion"},
                            {"data":"AddressLine1"},
                            {"data":"PostalCode"},

                            {"data":"City"},
                            {"data":"AddressType"},
                            {"data":"CountryCode"},
                            {"data":"Name"}

                    ]
//                   ,"columnDefs" : [ {
//                       "targets" : 12,//操作按钮目标列
//                       "data" : null,
//                       "render" : function(data, type,row) {
//                           var id = '"' + row.id + '"';
//                           var html = "<a onclick='view("+id+")' class='delete btn btn-default btn-xs'><i class='fa fa-eye'></i> 查看</a>"
//                           html += "<a onclick='edit("+id+")' class='up btn btn-default btn-xs'><i class='fa fa-pencil'></i> 编辑</a>"
//                           html += "<a onclick='del("+id+")' class='down btn btn-default btn-xs'><i class='fa fa-trash-o'></i> 删除</a>"
//                           return html;
//                       }
//                   } ]

                });

                $(".btn-primary").click(function(){

                    tb.search("","","").draw();

                });


                $('.getorder').click(function(){

                     $.ajax({
                         type: 'GET',
                         url: appUrl+'/order/orders',
                         success: function(){

                             alert('同步成功！');
                         }
                     })
                });

            } );

            function view(id){


                $('.detailItem').show();

                var template=   '<div class="form-group rowDetail">'+
                                    '<label for="example-url-input" class="">{name}</label><br />'+
                                    '<div class="rowItem">'+
                                        '<input class="form-control" style="width: 90%" type="url" id="example-url-input" value="{value}">'+
                                    '</div><div class="clear"></div>'+
                                '</div>';
                var html ="";
                $.ajax(
                        {
                            type: "GET",
                            url: appUrl+"/shop/"+id,
                            cache:false,
                            async:false,
                            dataType: "json",
                            success: function(e){

                                for(var i in e){
                                    var text= e[i];
                                    html+=template.replace("{value}",text);
                                }

                                $(".detail-form").html(html);
                            }
                        }
                );
            }

            function edit(id){
                alert(id);
            }

            function del(id){

                alert(id);
            }
        </script>

    </body>

<!-- Mirrored from preview.freewebtemplatesdownload.com/syntra/tables-datatable.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 07 Mar 2018 10:32:12 GMT -->
</html>
